<template>
    <section class="ads-create">
        <create-step/>
        <!-- <audience-count v-if="activeStep=='2'"/> -->
        <div class="ads-create-collapse">
            <el-collapse v-model="activeStep" @change="handleCollapseChange" accordion style="border:none">
                <el-collapse-item  name="1" >
                    <template slot="title">
                        <span>1、广告目标</span>
                        <span class="close-tips" v-text="activeStep=='1'&&stepOne?'收起':'展开'"></span>
                    </template>
                    <adver-plan/>
                </el-collapse-item>
                <el-collapse-item v-if="createdStep>=2" name="2">
                    <template slot="title">
                        <span>2、选择受众</span>
                        <span class="close-tips" v-text="activeStep=='2'&&stepTwo?'收起':'展开'"></span>
                    </template>
                    <select-audience type="new"/>
                </el-collapse-item>
                <el-collapse-item  v-if="createdStep>=3" name="3">
                    <template slot="title">
                        <span>3、预算和排期</span>
                        <span class="close-tips" v-text="activeStep=='3'&&stepThir?'收起':'展开'"></span>
                    </template>
                    <budget-schedule v-if="adPlatform == 'Facebook'" type="new"/>
                    <google-budget v-if="adPlatform == 'Google'" type="new"/>
                </el-collapse-item>
                <el-collapse-item  v-if="createdStep>=4" name="4">
                    <template slot="title">
                        <span>4、广告制作</span>
                        <span class="close-tips" v-text="activeStep=='4'&&stepFour?'收起':'展开'"></span>
                    </template>
                    <ad-create v-if="adPlatform == 'Facebook'"/>
                    <google-create v-if="adPlatform == 'Google'"/>
                </el-collapse-item>
                <!--<el-collapse-item  v-if="createdStep>=5" name="5">
                    <template slot="title">
                        <span>5.发布广告</span>
                    </template>
                    <ad-post></ad-post>
                </el-collapse-item>-->
            </el-collapse>
        </div>
    </section>
</template>

<script>
    import Vue from 'vue'
    import { Row,Col,steps,step,collapse,collapseItem ,MessageBox } from 'element-ui'
    import AdverPlan from '~components/create/adverPlan.vue'
    import SelectAudience from '~components/create/selectAudience.vue'
    import BudgetSchedule from '~components/create/budget-schedule.vue'
    import AdCreate from '~components/create/ad-create.vue'
    import AdPost from '~components/create/ad-post.vue'
    import CreateStep from '~components/create/createStep.vue'
    import GoogleBudget from '~components/create/google-budget.vue'
    import GoogleCreate from '~components/create/google-create.vue'

    import { mapGetters, mapMutations} from 'vuex';

    Vue.use(Row)
    Vue.use(Col)
    Vue.use(steps)
    Vue.use(step)
    Vue.use(collapse)
    Vue.use(collapseItem)

    export default {
        head(){
            return{
                title: 'ADS-创建广告'
            }
        },
        components: {
            AdverPlan,
            SelectAudience,
            BudgetSchedule,
            AdCreate,
            AdPost,
            CreateStep,
            GoogleBudget,
            GoogleCreate
        },
        data() {
            return {
                collapseName: '4',
                budgetData:{},
                stepOne:true,
                stepTwo:true,
                stepThir:true,
                stepFour:true,
            };
        },
        computed: {
            ...mapGetters({
                'adPlatform' : 'adPlatform',
                'activeStep' : 'activeStep',
                'createdStep' : 'createdStep',
                'isAdPostDone' : 'getIsAdPostDone'
            })
        },
        created(){
            this.$store.commit('INIT_STEP', {step:"INIT"});
            this.$store.commit('ACTIVE_STEP', {step:"1"});
            this.$store.commit('CREATED_STEP', {step:"1"});
        },
        methods: {
            handleCollapseChange (activeNames) {
                if(!activeNames){
                    this.stepOne =  this.activeStep == '1'?false:true;
                    this.stepTwo =  this.activeStep == '2'?false:true;
                    this.stepThir =  this.activeStep == '3'?false:true;
                    this.stepFour =  this.activeStep == '4'?false:true;
                }else{
                    this.stepOne =  true;
                    this.stepTwo =  true;
                    this.stepThir = true;
                    this.stepFour = true;
                };
                this.$store.commit('ACTIVE_STEP', {step:activeNames||this.activeStep});
            },
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            if(this.createdStep > 1 && !this.isAdPostDone){
                MessageBox.confirm('存在编辑中的广告，确定切换至其他页面？', '提示', {
                    confirmButtonText: '留下',
                    cancelButtonText: '离开',
                    type: 'warning'
                }).then(() => {
                    next(false);
                }).catch(() => {
                    next();
                });
            }else {
                next();
            }
        }
    }
</script>

<style lang="scss">
    .ads-create{
        .el-collapse-item{
            margin-bottom: 3px;
        }
        .el-collapse-item__header{
            overflow: hidden;
            text-align: right;
            color: #b7c4ca;
            background-color:#F4F7F9;
            border-bottom:none;
            span{
                float: left;
                height: 100%;
                font-size: 14px;
                color: #333;
            }
        }
        position: relative;
        overflow: hidden;
        .el-collapse-item__wrap{
            border-bottom:none;
            background-color: #fff;
        }
        .ads-create-collapse{
            padding: 10px;
            width: 948px;
            float: right;
            border:1px solid #EAEEF0;
            min-height: 550px;
            background: #ffffff;
        }
        .close-tips{
            position: absolute;
            right: 38px;
            color: #cccccc !important;
            height: 43px !important;
        }
    }
</style>